<template>
  <div class="json-view hljs" :style="{ fontSize: fontSize + 'px' }">
    <pre class="language-json hljs" v-html="pretty"></pre>
    <a-button v-if="copy" type="text" link class="json-view-copy" @click="execCopy">复制</a-button>
  </div>
</template>
<script lang="ts">
import { mapState } from "pinia";
import { useGlobalSettingStore } from "@/store";
import { app } from "@/module/storage";
import { formatJsonString } from "$/util";

export default defineComponent({
  name: "JsonView",
  props: {
    value: {
      type: String,
      default: "{}"
    },
    copy: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  computed: {
    ...mapState(useGlobalSettingStore, ["fontSize"])
  },
  setup(props) {
    const pretty = computed(() => formatJsonString(props.value));
    const execCopy = () => app.copyText(props.value);
    return {
      pretty,
      execCopy
    };
  }
});
</script>
<style lang="less">
.json-view {
  position: relative;

  .json-view-copy {
    position: absolute;
    top: 12px;
    right: 20px;
  }

  .hljs {
    padding-top: 0;

    span {
      cursor: text;
    }
  }
}
</style>
